<template>
  <div class="update">
    <p>update</p>
    <div class="update-box"></div>
  </div>
</template>
 
<script>
import * as d3 from "d3";
export default {
  data () {
    return {
      msg:''
    }
  },
  mounted() {
    this.drawUpdate()
  },
  methods: {
    drawUpdate() {
      //Width and height
      var w = 1000;
      var h = 300;
      var padding = 20;
      // 生成随机数
      let valueNum = 10;
      var dataset = [];
      for (var i = 0; i < valueNum; i++) {
        var num = Math.floor(Math.random() * 100);
        dataset.push(num);
      }
      // console.log(dataset)
      // 生成比例尺
      var xScale = d3
        .scaleOrdinal()
        .domain(d3.range(dataset.length))
        .range([0, w], 0.05);
      var yScale = d3
        .scaleLinear()
        .domain([
          0, 
          d3.max(dataset, function(d) {
            return d
          })
        ])
        .range([h - padding, padding]);
      
      //生成坐标轴
      var xAxis = d3
        .axisBottom()
        .scale(xScale)
        .ticks(5);
      var yAxis = d3
        .axisLeft()
        .scale(yScale)
        .ticks(5);

      //生成svg
      var svg = d3
        .select(".update-box")
        .append("svg")
        .attr("width", w)
        .attr("height", h);
      //生成柱形图并绑定数据
      svg
        .selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", function(d, i) {
          return xScale.domain()[i] * 10;
        })
        .attr("y", function(d) {
          return h - yScale(d);
        })
        .attr("width", 10)
        .attr("height", function(d) {
          return yScale(d);
        })
        .attr("fill", "black")
        .on('click', function(d) {
          console.log(d)
        })
      //生成标签
      svg
        .selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .text(function(d) {
          return d;
        })
        .attr("x", function(d, i) {
          return xScale.domain()[i] * 10 + 2;
        })
        .attr("y", function(d) {
          return h - yScale(d) + 14;
        })
        .attr("font-size", "8px")
        .attr("font-family", "san-serif")
        .attr("fill", "red")
        .on('click', function(d) {
          console.log(d)
        });

      // 设置监听
      d3.select("p").on("click", function() {
        // 生成随机数
        var dataset = [];
        for (let i = 0; i < valueNum; i++) {
          var num = Math.floor(Math.random() * 100);
          dataset.push(num);
        }
        //更新比例尺
        var xScale = d3
          .scaleOrdinal()
          .domain(d3.range(dataset.length))
          .range([0, w], 0.05);
        var yScale = d3
          .scaleLinear()
          .domain([0, d3.max(dataset)])
          .range([h - padding, padding]);
        // 更新数据
        svg
          .selectAll("rect")
          .data(dataset)
          .transition()
          .duration(1000)
          .each(function(d, i) {
            d3.select(this)
              .attr("x", xScale.domain()[i] * 10)
              .attr("y", h - yScale(d))
              .attr("width", 10)
              .attr("height", yScale(d))
              .attr("fill", "black");
          });
        svg
          .selectAll("text")
          .data(dataset)
          .enter()
          .append("text")
          .text(function(d) {
            // console.log(d)
            return d;
          })
          .attr("x", function(d, i) {
            return xScale.domain()[i] * 10 + 2;
          })
          .attr("y", function(d) {
            return h - yScale(d) + 14;
          })
          .attr("font-size", "8px")
          .attr("font-family", "san-serif")
          .attr("fill", "red");
      });
    }
  }
}
</script>
 
<style scoped lang="scss">
 
</style>